<div class=page_head>
<h2><%="Instant Communication".t%></h2>
</div>
<style>
/*CHAT ROOM*/
#chat-list {
  overflow:auto;
  width:100%;
  height:300px;
  border:2px #ccc solid;
  padding:5px;
  margin-bottom:5px;
}
.chat_item{
  padding:0px;
  margin:0px;
}
.chat_item span.my {
  color:red;
}
.chat_item td.name {
  width:100px; 
  font-weight:bold;
  text-align:right;
}
.chat_item span.time{
  padding:2px;
  font-family:ms shell dlg; 
  color:#666;
  font-size:10px;
}
.chat_item table{
  width:100%;
  border-collapse:collapse;
}
.chat_item td{
  border:0;
  padding:0;
  font-size:12px;
}
.chat_item td.division {
  border-right:1px #ccc solid;
  width:75px;
  text-align:right;
}
.chat_item td.item {
  padding-left:5px;
  padding-bottom:3px;
  padding-top:3px;
  border-bottom:1px #ccc dashed;
}
</style>

 <!-- form to input message -->
 <%= render_component :action => 'new',:params=>{:channel_id => @channel.id,:project_id=>@project.id}%>


 <!-- message list -->
 <div id="chat-list">
 <% for chat in @chats %>
  <%= render_component :action => 'show', :id => chat.id%>
 <% end %>
 </div>


 <!-- gemerate js script to connect with ShootingStar -->
 <!-- 'shot_chat'is the name of the connection channel -->
 <%= meteor_strike 'shot_chat' %>

